<!-- 财务员工收银台 -->
<template>
  <div class="owner-cashier">
    <!--  描述  -->
    <a-descriptions :title="null" bordered class="owner-descriptions">
      <a-descriptions-item label="业户">
        <span class="link" @click="ownerDetailVisible = true">
          {{ ownerData?.name || "--" }}
        </span>
      </a-descriptions-item>
      <a-descriptions-item>
        <template #label>
          合同有效期
          <TextTip
              tips="仅展示最后一个合同的状态。若存在多笔，请点击租客名称查看更多合同信息。"
          />
        </template>
        <span
            :class="ownerData?.contract_data?.id ? 'link' : ''"
            @click="toContractDetail(ownerData?.contract_data?.id)"
        >
          {{
            `${ownerData?.contract_data?.lease_starttime || "--"}~${
                ownerData?.contract_data?.lease_endtime || "--"
            }`
          }}
        </span>
      </a-descriptions-item>
      <a-descriptions-item>
        <template #label>
          合同状态
          <TextTip
              tips="仅展示最后一个合同的状态。若存在多笔，请点击租客名称查看更多合同信息。"
          />
        </template>
        {{ ownerData?.contract_data?.status_txt || "--" }}
      </a-descriptions-item>
      <a-descriptions-item label="默认联系人">
        {{ ownerData?.contact_name || "--" }}
      </a-descriptions-item>
      <a-descriptions-item label="合同经办人">
        {{ ownerData?.contract_data?.followup_uname || "--" }}
      </a-descriptions-item>
      <a-descriptions-item>
        <template #label>
          预存款
          <TextTip
              tips="预存款即收支流水未被匹配使用的总额，点击查看该租客所有收支流水。"
          />
        </template>
        <span class="link" @click="toBillTurnover()">
          {{ ownerData?.balance || "--" }}
        </span>
      </a-descriptions-item>
    </a-descriptions>
    <!--  关联房屋  -->
    <a-table
        class="bind-table"
        :dataSource="ownerData?.bindList || []"
        :columns="houseColumns"
        :loading="bindLoading"
        :pagination="false"
        rowKey="id"
        :scroll="{ y: 280 }"
        bordered
    >
      <template #title>
        <span class="owner-bind"> 关联房屋 </span>
        <TextTip
            tips="此处的房屋将展示该租客关联的所有房屋，与左上角选中项目/楼宇无关。如果您未选中该楼宇，无法点击房号查看房屋详情。"
        />
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'room_number'">
          <span
              :class="canCheck(record.build_id) ? 'link' : 'disabled-link'"
              :title="
              canCheck(record.build_id)
                ? ''
                : '您未选中该项目楼宇，无法查看房屋详情。'
            "
              @click.stop="goRoomDetail(record.build_id, record)"
          >
            {{ text || "--" }}
          </span>
        </template>
        <template v-if="column.key === 'tag_name'">
          <template v-if="text?.length">
            <span v-for="(item, index) in text">
              {{ item }}
              <text v-if="text?.length > 1 && index + 1 !== text.length"
              >、</text
              >
            </span>
          </template>
          <span v-else>--</span>
        </template>
      </template>
    </a-table>

    <!--  账单列表  -->
    <div class="mt-10 bill-table">
      <a-table
          sticky
          :dataSource="billList"
          :columns="BILL_COLUMNS"
          :pagination="false"
          rowKey="id"
          :loading="billLoading"
          size="small"
          bordered
          :expandRowByClick="true"
          :customRow="customRow"
          :row-selection="rowSelection"
          :expandedRowKeys="expandedRowKeys"
          @expand="expandRow"
          :scroll="{ x: 'max-content' }"
      >
        <template #title>
          <a-row type="flex" align="middle" justify="space-between">
            <a-col class="font-16 bill-table-title">
              <span>账单列表</span>
              <div class="switch-wrap">
                <a-switch
                    v-model:checked="isExpandReceived"
                    checked-children="显示"
                    un-checked-children="隐藏"
                    @change="changeShowReceive"
                />
                <span style="font-size: 12px; padding: 0 8px">{{
                    isExpandReceived
                        ? "已显示已收账单"
                        : "已隐藏已收账单"
                  }}</span>
              </div>
              <div class="switch-wrap">
                <a-switch
                    v-model:checked="isExpandNotYetDue"
                    checked-children="显示"
                    un-checked-children="隐藏"
                    @change="changeShowNotYetDue"
                />
                <span style="font-size: 12px; padding: 0 8px">{{
                    isExpandNotYetDue
                        ? "已显示未到应收期账单"
                        : "已隐藏未到应收期账单"
                  }}</span>
              </div>
            </a-col>
            <a-col>
              <a-space>
                <a-button
                  type="primary"
                  ghost
                  @click="refundVisible = true"
                  v-permission="['billList', 'auth', 'addAdjust']"
                >
                  退款
                </a-button>

                <a-button
                    v-if="selectBillIds.length"
                    type="primary"
                    ghost
                    @click="goMakeCollections"
                >
                  <template #icon>
                    <CheckCircleOutlined/>
                  </template>
                  组合收款
                </a-button>

                <a-button
                  v-permission="['billList', 'auth', 'buildPaymentNotice']"
                  type="primary"
                  ghost
                  @click="addPaymentNotice"
                  v-if="selectBillIds.length"
                >
                  生成缴费通知单
                </a-button>

                <a-button v-else type="primary" ghost @click="addTurnover">
                  <template #icon>
                    <PlusOutlined/>
                  </template>
                  收支流水
                </a-button>

                <!-- 小区场景特殊处理 -->
                <template v-if="villageType == 'village'">
                  <a-dropdown>
                    <template #overlay>
                      <a-menu @click="addBillClick">
                        <a-menu-item key="add">手动添加账单</a-menu-item>
                        <a-menu-item key="automatic" :disabled="bindLoading"
                        >按收费标准生成
                        </a-menu-item
                        >
                      </a-menu>
                    </template>
                    <a-button type="primary">
                      <template #icon>
                        <PlusCircleOutlined/>
                      </template>
                      添加账单
                    </a-button>
                  </a-dropdown>
                </template>
                <template v-else>
                  <a-button type="primary" @click="addBill()">
                    <template #icon>
                      <PlusCircleOutlined/>
                    </template>
                    添加账单
                  </a-button>
                </template>
              </a-space>
            </a-col>
          </a-row>
        </template>

        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'billName'">
            <span v-if="record.infoType === 'contract'">
              合同：
              <span
                  :class="record.contract_id ? 'link' : ''"
                  @click.stop="toContractDetail(record.contract_id)"
              >{{ record.contract_number }}</span
              >
            </span>
            <span v-else-if="record.infoType === 'other'"> 其他 </span>
            <span v-else>{{ text }}</span>
          </template>
          <template v-if="column.key === 'receiveRentTotal'">
            <span v-if="record.infoType === 'contract'">
              合同有效期：
              <span>{{ record.period }}</span>
            </span>
            <span v-else>{{ text }}</span>
          </template>
          <template v-if="column.key === 'receiveLatefeeTotal'">
            <span v-if="record.infoType === 'contract'">
              合同状态：
              <span>正在执行中</span>
            </span>
            <span v-else>{{ text }}</span>
          </template>
          <template v-if="column.key === 'receiveOtherTotal'">
            <a-space>
              <span
                  v-if="record.children"
                  :class="{ 'text-primary': record.otherCount }"
              >
                {{ record.otherCount }}项
              </span>
              <span> {{ text }} </span>
              <a-button
                  type="link"
                  v-if="record.children"
                  @click.stop="addBill(record)"
              >
                <PlusCircleOutlined/>
              </a-button>
            </a-space>
          </template>
          <template v-if="column.key === 'settle'">
            <template v-if="record.infoType !== 'contract'">
              <template v-if="text?.length == 1">
                <div
                    v-if="text[0] == 5"
                    class="text-error pointer"
                    @click.stop="onMakeCollections(record)"
                >
                  <span>待收</span>
                  <span
                      v-if="
                      record.children && index == activeTipsIndex
                    "
                  >
                    (点击收款)
                  </span>
                </div>
                <div
                    v-if="text[0] == 3"
                    class="text-warning pointer"
                    @click.stop="onMakeCollections(record)"
                >
                  <span>部分已收</span>
                </div>
                <span v-if="text[0] == 2" class="text-success">已收</span>
                <span v-if="text[0] == 4" class="text-error">待退款</span>
              </template>
              <div
                  v-else
                  class="text-warning pointer"
                  @click.stop="onMakeCollections(record)"
              >
                <span> 部分已收 </span>
                <span
                    v-if="
                    record.children && index == activeTipsIndex
                  "
                >
                  (点击收款)
                </span>
              </div>
            </template>
            <div v-else class="bind-room-box">
              关联房屋：
              <span
                  v-if="record.build_bind && record.build_bind.room.length > 0"
              >
                <span
                    v-for="(room, index) in record.build_bind.room"
                    :class="canCheck(room.build_id) ? 'link' : 'disabled-link'"
                    :title="
                    canCheck(room.build_id)
                      ? ''
                      : '您未选中该项目楼宇，无法查看房屋详情。'
                  "
                    :key="index"
                    @click.stop="
                    roomClick(
                      room,
                      record.build_bind.room,
                      record.build_bind.village.id
                    )
                  "
                >{{
                    index === 0
                        ? `${
                            room.village_name ||
                            record.build_bind.village.name ||
                            ""
                        }/${
                            room.build_name ||
                            getBuildName(
                                record.build_bind.build,
                                room.build_id
                            ) ||
                            ""
                        }/${room.layer_name}/${room.room_name}`
                        : room.layer_name + "/" + room.room_name
                  }}<text
                      v-if="
                      record.build_bind.room.length > 1 &&
                      index + 1 !== record.build_bind.room.length
                    "
                  >、</text
                  >
                </span>
              </span>
            </div>
          </template>
          <template v-if="column.key === 'notice'">
            <span v-if="text" class="text-success">已催收</span>
            <a-space v-else>
              <span class="text-warning">未催收</span>
              <a-button
                  type="link"
                  :disabled="
                  record.settleStatus?.length === 1
                    ? record.settleStatus[0] == 2 || record.settleStatus[0] == 4
                    : false
                "
                  @click.stop="onPayNotice(record)"
              >
                <PlusCircleOutlined/>
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- 账单详情 -->
    <BillDetailDrawer
        :visible="billDetailVisible"
        :id="billDetailId"
        @cancel="onBillDetailClose"
    />

    <!-- 缴费通知 -->
    <AddPayNotice
        :visible="noticeVisible"
        :ids="noticeBillIds"
        @closeDrawer="noticeVisible = false"
        @success="onNoticeSuccess"
    />

    <!--  房间详情  -->
    <RoomDrawer
        v-if="houseDetailVisible"
        :visible="houseDetailVisible"
        @cancel="cancelRoomDetail"
        :detail="roomDetail"
        :maxRoomNumber="maxRoomNumber"
        :roomList="roomList"
        pageFrom="CashierDesk"
    />

    <!-- 发起收款 -->
    <MakeCollections
        :visible="collectVisible"
        :collectionType="collectionType"
        :ownerInfo="currentOwner"
        :roomDetail="{}"
        from="cashier"
        :billInfo="currentBill"
        :collectionsList="collectionsList"
        @cancel="collectCancel"
        @success="onCollectionsSuccess"
    />

    <!-- 添加账单 -->
    <NewIncomeBillDrawer
        :visible="addBillVisible"
        :ownerInfo="currentOwner"
        :roomBindList="ownerData?.bindList || []"
        :isSelectRoom="true"
        :billCycle="billCycle"
        @cancel="addBillVisible = false"
        @success="onBillAddSuccess"
    />

    <!--  合同详情  -->
    <ContractDetailDrawer
        :visible="contractDetailVisible"
        :id="contractDetailId"
        @handleCancel="contractDetailVisible = false"
    />

    <!-- 租客详情 -->
    <OwnerDetailDrawer
        :visible="ownerDetailVisible"
        :id="ownerId"
        @cancel="cancelOwnerDetail"
    />

    <!--  租客收支流水  -->
    <a-drawer
        :width="1200"
        :visible="billTurnoverVisible"
        :maskClosable="true"
        title="收支流水"
        @close="billTurnoverClose"
        :destroyOnClose="true"
        :body-style="{
        padding: '0 16px'
      }"
    >
      <div :style="{padding: '16px 0'}">
        <BillTurnoverTable
            :isTenant="false"
            :isDrawer="true"
            :dataList="turnoverList"
            :loading="turnoverLoading"
            :pagination="turnoverPagination"
            @showDraweres="getTurnoverData(true)"
            @handleTableChange="turnoverTableChange"
        />
      </div>
    </a-drawer>

    <!--  新建收支流水  -->
    <AddBillTurnoverDrawer
        :visible="addTurnoverVisible"
        :ownerId="ownerId"
        @handleClose="handleAddBillClose"
        @handleSuccess="saveAddTurnover"
    />

    <!-- 选择收费标准 -->
    <SelectChargeStandard
        :appendParams="{village_id: villageIds}"
        :visible="selectStandardVisible"
        @close="chargeStandardClose"
        @success="chargeStandardSuccess"
    />

    <!-- 收费标准生成账单 -->
    <StandardGenerateOrder
        :visible="standardGenerateOrderVisible"
        :standardInfo="currentChargeStandard"
        :charges_id="currentChargeId"
        :roomDetail="currentRoom"
        @close="standardGenerateOrderClose"
    />

    <add-notice
      @closeDrawer="addNoticeClose"
      @success="addNoticeSuccess"
      :visible="addNoticeVisible"
      :ids="addNoticeIds"
    >
    </add-notice>

    <!--  账单退款  -->
    <SelectBillRefundDrawer
      :ownerId="ownerId"
      :visible="refundVisible"
      @handleClose="handleRefundClose"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  computed,
  watch,
  onActivated,
  watchEffect,
  createVNode,
} from "vue";

import {
  LeftOutlined,
  PlusCircleOutlined,
  CheckCircleOutlined,
  PlusOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import {TextTip} from "bl-common-vue3";
import store from "@/store";
import RoomDrawer from "@/components/village/RoomDrawer.vue";
import _ from "lodash";
import MakeCollections from "@/views/bill/NewBill/modules/MakeCollections.vue";
import BillDetailDrawer from "@/views/bill/BillDetail/modules/BillDetailDrawer.vue";
import AddPayNotice from "@/views/bill/AllBills/AddNotice.vue";
import ContractDetailDrawer from "@/views/contract/ContractDetail/ContractDetailDrawer.vue";
import OwnerDetailDrawer from "@/views/village/OwnerManage/modules/OwnerDetailDrawer.vue";
import BillTurnoverTable from "@/views/bill/BillTurnover/modules/BillTurnoverTable.vue";
import NewTurnover from "@/views/bill/NewTurnover/index.vue";
import utils from "@/common/utils/utils";
import SelectChargeStandard from "@/views/bill/CashierDesk/modules/SelectChargeStandard.vue";
import StandardGenerateOrder from "@/views/bill/ChargingStandards/modules/generateOrder.vue";
import {Modal} from "ant-design-vue";
import moment from "moment";
import AddBillTurnoverDrawer from "@/views/bill/BillTurnover/modules/AddBillTurnoverDrawer.vue";
import NewIncomeBillDrawer from "@/views/bill/NewBill/modules/NewIncomeBillDrawer.vue";
import AddNotice from "@/views/bill/AllBills/AddNotice.vue";
import SelectBillRefundDrawer from "@/views/bill/AllBills/modules/SelectBillRefundDrawer.vue";

export default defineComponent({
  name: "ownerCheckStand",
  components: {
    SelectBillRefundDrawer,
    AddBillTurnoverDrawer,
    NewTurnover,
    PlusOutlined,
    BillTurnoverTable,
    OwnerDetailDrawer,
    ContractDetailDrawer,
    AddPayNotice,
    BillDetailDrawer,
    MakeCollections,
    RoomDrawer,
    PlusCircleOutlined,
    LeftOutlined,
    TextTip,
    CheckCircleOutlined,
    ArrowDownOutlined,
    ArrowUpOutlined,
    SelectChargeStandard,
    StandardGenerateOrder,
    NewIncomeBillDrawer,
    AddNotice,
  },
  props: {
    ownerId: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, {emit}) {
    const state = reactive({
      ownerData: {},
      bindLoading: false,
      billLoading: false,
      billList: [],
      selectedRowKeys: [],
      addBillVisible: false,
      billCycle: {},
      collectionType: "single", // single 从列表点击 multiple 多选
      collectionsList: [], // 收款的list (不包含第几次 且 名称后面加上 期数)
      collectVisible: false, // 发起收款的显隐
      currentBill: {}, // 某一次 + 次数下所有的账单
      expandedRowKeys: [],
      billDetailVisible: false,
      billDetailId: 0,
      //通知
      noticeBillIds: [],
      noticeVisible: false,
      // 合同详情
      contractDetailVisible: false,
      contractDetailId: 0,
      // 租客详情
      ownerDetailVisible: false,
      // 房间详情
      maxRoomNumber: 0,
      roomList: [],
      houseDetailVisible: false,
      roomDetail: {},
      // 租客收支流水
      billTurnoverVisible: false,
      turnoverList: [],
      turnoverLoading: false,
      turnoverTotal: 0,
      turnoverPage: 1,
      turnoverLimit: 10,
      // 增加收支流水
      addTurnoverVisible: false,
      isExpandReceived: utils.getStorage("expand_received") === "true", // 已收账单
      isExpandNotYetDue: utils.getStorage("expand_not_yet_Due") === "true", // 未到期账单
      selectStandardVisible: false, //选择收费标准的modal
      standardGenerateOrderVisible: false, //收费标准生成账单的modal
      currentChargeStandard: {}, //当前选中的收费标准
      currentChargeId: 0, //当前选中的收费标准id
      currentRoom: {}, //当前选中的房间
      villageIds: '',
      penaltyBill: [], // 罚款账单
      allList: [], // 展示全部账单
      notYetDueList: [], // 只隐藏未到期账单
      noReceivedList: [], // 只隐藏已收账单
      noReceivedAndNotYetDue: [], // 隐藏已收账单和未到期账单
      defaultTipIndex: -1, // 默认的tips
      notYetDueTipIndex: -1,  // 只隐藏未到期账单tips
      noReceivedTipIndex: -1,
      noReceivedAndNotYetDueTipIndex: -1,
      addNoticeVisible: false,
      addNoticeIds: [], // 生成缴费通知单的账单id
      selectBillIds: [],
      refundVisible: false,
    });
    const turnoverPagination = computed(() => ({
      total: state.turnoverTotal,
      current: state.turnoverPage,
      pageSize: state.turnoverLimit,
      showSizeChanger: true,
    }));

    const villageType = computed(() => store.getters.buildingInfo.villageType);

    const getCashierInfo = () => {
      state.bindLoading = true;
      request
          .get("/org", "/owner/billCashier", {owner_id: props.ownerId})
          .then((res) => {
            state.ownerData = res?.ownerData || {};
            state.villageIds = Array.from(new Set((res?.ownerData?.bindList || []).map((v) => v.village_id))).join(',');
          })
          .finally(() => {
            state.bindLoading = false;
          });
    };

    const getBuildName = (buildList, id) => {
      if (typeof buildList == "object") {
        return buildList.build_name;
      } else {
        return buildList.filter((v) => v.id == id)[0]?.build_name;
      }
    };

    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        onSelectAll: onSelectAll,
        onSelect: (record, selected) => {
          onSelect(record, selected, false)
        },
        getCheckboxProps: getCheckboxProps,
      };
    });

    const cancelOwnerDetail = () => {
      state.ownerDetailVisible = false;
      getCashierInfo();
    };

    // 去往合同详情
    const toContractDetail = (id) => {
      if (id) {
        state.contractDetailId = id;
        state.contractDetailVisible = true;
      }
    };

    const getTurnoverData = (init = false) => {
      state.turnoverLoading = true;
      if (init) {
        state.turnoverPage = 1;
      }
      let params = {
        page: state.turnoverPage,
        limit: state.turnoverLimit,
        owner_id: props.ownerId,
        owner_name: state.ownerData?.name || "",
      };
      request
          .get("/org", "/bill/streamList", params)
          .then((res) => {
            res.list.forEach((item) => {
              item.build_bind = Array.isArray(item.build_bind)
                  ? null
                  : item.build_bind;
            });
            state.turnoverList = res.list;
            state.turnoverTotal = res.total;
            state.total = res.total;
          })
          .finally(() => {
            state.turnoverLoading = false;
          });
    };

    const toBillTurnover = () => {
      state.billTurnoverVisible = true;
      getTurnoverData(true);
    };

    // 关闭租客收支流水
    const billTurnoverClose = () => {
      state.billTurnoverVisible = false;
      state.turnoverPage = 1;
      state.turnoverTotal = 0;
      state.turnoverLimit = 10;
      state.turnoverList = [];
    };

    const turnoverTableChange = (pager, filters, sorter) => {
      state.turnoverPage = pager.current;
      state.turnoverLimit = pager.pageSize;
      getTurnoverData();
    };

    const canCheck = (buildId) => {
      const {checkedBuildings} = store.getters.buildingInfo;
      if (checkedBuildings.includes(buildId)) {
        return true;
      } else {
        return false;
      }
    };

    const goRoomDetail = (buildId, record) => {
      if (canCheck(buildId)) {
        state.roomDetail = record;
        state.houseDetailVisible = true;
      }
    };

    const showModalTips = (msg) => {
      Modal.info({
        title: '请注意：',
        centered: true,
        content: () => msg,
      });
    };

    const resetTipsFilters = () => {
      state.allList = [];
      state.notYetDueList = [];
      state.noReceivedList = [];
      state.noReceivedAndNotYetDue = [];
      state.defaultTipIndex = -1;
      state.notYetDueTipIndex = -1;
      state.noReceivedTipIndex = -1;
      state.noReceivedAndNotYetDueTipIndex = -1;
    };

    const changeBillList = () => {
      if (state.isExpandReceived && state.isExpandNotYetDue) {
        // 展示全部账单
        state.billList = [..._.cloneDeep(state.allList)];
      } else if (state.isExpandReceived && !state.isExpandNotYetDue) {
        // 只隐藏未到期账单
        state.billList = [..._.cloneDeep(state.notYetDueList)];
      } else if (state.isExpandNotYetDue && !state.isExpandReceived) {
        // 只隐藏已收账单
        state.billList = [..._.cloneDeep(state.noReceivedList)];
      } else {
        // 隐藏已收账单和未到期账单
        state.billList = [..._.cloneDeep(state.noReceivedAndNotYetDue)];
      }
    };

    const activeTipsIndex = computed(() => {
      if (state.isExpandReceived && state.isExpandNotYetDue) {
        // 展示全部账单
        return state.defaultTipIndex;
      } else if (state.isExpandReceived && !state.isExpandNotYetDue) {
        // 只隐藏未到期账单
        return state.notYetDueTipIndex;
      } else if (state.isExpandNotYetDue && !state.isExpandReceived) {
        // 只隐藏已收账单
        return state.noReceivedTipIndex;
      } else {
        // 隐藏已收账单和未到期账单
        return state.noReceivedAndNotYetDueTipIndex;
      }
    })

    // 初始化的时候 合同层级 如果只有一个子集 默认展开
    const getBillList = (init = false, penalty = false) => {
      state.billLoading = true;
      state.penaltyBill = [];
      resetTipsFilters();
      request
          .get("/org", "/owner/financeList/v2", {owner_id: props.ownerId})
          .then((res) => {
            res.newList.forEach((period, index) => {
              let otherCount = 0;
              let newPeriod = {
                id: `period_${period.sort}`,
                sort: period.sort,
                infoType: "times",
                // 缴费次数、内容
                name: `第${period.sort}次`,
                // 应收时间
                month: period.month,
                // 有效期
                period: `${period.monthStart}~${period.monthEnd}`,
                start: period.monthStart,
                end: period.monthEnd,
                // 应收租金
                receiveRentTotal: Number(period.receiveRentTotal).toFixed(2),
                // 其他费用
                receiveOtherTotal: Number(period.receiveOtherTotal).toFixed(2),
                // 滞纳金
                receiveLatefeeTotal: Number(period.receiveLatefeeTotal).toFixed(
                    2
                ),
                // 应收金额
                receiveTotal: utils.countSum([ Number(period.receiveRentTotal), Number(period.receiveOtherTotal),  Number(period.receiveLatefeeTotal), Number(period.outAmountTotal), -Number(period.intoAmountTotal)]).toFixed(2),
                // 收款状态
                settleStatus: period.settleStatusArr,
                // 实收金额
                actualTotal: Number(period.actualTotal).toFixed(2),
                // 催收通知
                noticeStatus: period.noticeFlag,
                children: period.contractBillList.map((contract) => {
                  // 初始化时只有一个展开（如果只有一个其他项 则去掉了其他项 所以此处需判断只有一个 且是合同）
                  if (
                      period.contractBillList.length === 1 &&
                      period.contractBillList[0].id &&
                      init
                  ) {
                    state.expandedRowKeys.push(
                        `period_${period.sort}_${contract.id}`
                    );
                  }
                  let newContract = {
                    id: `period_${period.sort}_${contract.id}`,
                    sort: period.sort,
                    contract_id: contract.id,
                    contract_number: contract.contract_number,
                    period: `${contract.lease_starttime}~${contract.lease_endtime}`,
                    lease_starttime: contract.lease_starttime,
                    lease_endtime: contract.lease_endtime,
                    status_txt: contract.status_txt,
                    build_bind: contract.build_bind,
                    buildIds: contract.buildIds,
                    build_id: contract.build_id,
                    village_id: contract.village_id,
                    org_id: contract.org_id,
                    infoType: contract.id ? "contract" : "other",
                    bill_list: contract.bill_list,
                    // 子账单
                    children: contract.bill_list.map((bill) => {
                      let newBill = {
                        id: bill.id,
                        fatherId: [`period_${period.sort}`, `period_${period.sort}_${contract.id}`],
                        sort: period.sort,
                        name: bill.cost_type_txt,
                        month: bill.receivable_payment_date,
                        period: `${bill.start_date}~${bill.end_date}`,
                        infoType: "bill",
                        start: bill.start_date,
                        end: bill.end_date,
                        income_date: bill.income_date,
                        receiveLatefeeTotal: Number(
                            bill.receivable_latefee
                        ).toFixed(2),
                        receiveTotal: utils.countSum([Number(bill.receivable_payment), Number(bill.receivable_latefee), -Number(bill.into_amount), Number(bill.out_amount)]).toFixed(2),
                        noticeStatus: bill.notice_status,
                        settleStatus: [bill.settle_status],
                        actualTotal: (
                            Number(bill.actual_payment) +
                            Number(bill.actual_latefee)
                        ).toFixed(2),
                        build_bind: bill.build_bind,
                        owner_id: bill.owner_id,
                        bill_type: bill.bill_type,
                        cost_type: bill.cost_type,
                        org_id: bill.org_id,
                        build_id: bill.build_id,
                        remark: bill.remark,
                        is_bond: bill.is_bond,
                        is_forfeit: bill.is_forfeit,
                        org_branch_id: bill.org_branch_id,
                        bill_number: bill.bill_number,
                      };
                      if (bill.cost_type == "cost_15") {
                        newBill.receiveRentTotal = bill.receivable_payment;
                      } else {
                        newBill.receiveOtherTotal = bill.receivable_payment;
                        otherCount++;
                      }
                      // 罚款账单
                      if (
                          newBill.is_forfeit == 1 &&
                          !(
                              newBill.settleStatus?.length === 1 &&
                              (newBill.settleStatus[0] == 2 || newBill.settleStatus[0] == 4)
                          )
                      ) {
                        // 非已收和待退款的罚款账单映射
                        state.penaltyBill.push({...newBill});
                      }
                      return newBill;
                    }),
                  };
                  return newContract;
                }),
              };
              newPeriod.otherCount = otherCount;
              if (
                  state.defaultTipIndex < 0 &&
                  !(
                      newPeriod.settleStatus.length == 1 &&
                      (newPeriod.settleStatus[0] == 2 || newPeriod.settleStatus[0] == 4)
                  )
              ) {
                state.defaultTipIndex = index;
              }
              if (
                  newPeriod.children?.length === 1 &&
                  newPeriod.children[0].infoType === "other"
              ) {
                newPeriod.children = newPeriod.children[0]?.children || [];
              }
              // 未收
              if (
                  !(
                      newPeriod.settleStatus?.length === 1 &&
                      (newPeriod.settleStatus[0] == 2 || newPeriod.settleStatus[0] == 4)
                  )
              ) {
                state.noReceivedList.push(newPeriod);
                if (state.noReceivedTipIndex < 0) {
                  state.noReceivedTipIndex = state.noReceivedList.length - 1;
                }
                // 未收且已到期
                if (moment(newPeriod.month).isBefore(moment().add(1, 'M').format("YYYY-MM"))) {
                  state.noReceivedAndNotYetDue.push(newPeriod);
                  if (state.noReceivedAndNotYetDueTipIndex < 0) {
                    state.noReceivedAndNotYetDueTipIndex = state.noReceivedAndNotYetDue.length - 1;
                  }
                }
              }
              if (moment(newPeriod.month).isBefore(moment().add(1, 'M').format("YYYY-MM"))) {
                state.notYetDueList.push(newPeriod);
                if (state.notYetDueTipIndex < 0) {
                  state.notYetDueTipIndex = state.notYetDueList.findIndex((v) => !(v.settleStatus?.length === 1 && (v.settleStatus[0] == 2 || v.settleStatus[0] == 4)))
                }
              }
              // all 展示
              state.allList.push(newPeriod);
            });
            changeBillList();
            changeDisabled();
            // 罚款账单给出提示
            if (penalty && !_.isEmpty(state.penaltyBill)) {
              // 罚款账单给出提示
              if (state?.penaltyBill?.length) {
                const selectFine = async (arr) => {
                  for (const item of arr) {
                    await onSelect(item, true, true);
                  }
                }
                selectFine(state?.penaltyBill).then(() => {
                  if (state.selectedRowKeys.length && init) {
                    showModalTips('当前租客存在罚款账单，已经为您自动选中该账单。')
                  }
                });
              }
            }
          })
          .finally(() => {
            state.billLoading = false;
          });
    };

    const addBill = (record) => {
      if (record) {
        state.billCycle = {
          start: record.start,
          end: record.end,
        };
      } else {
        state.billCycle = {};
      }
      state.addBillVisible = true;
    };

    const onBillDetailClose = () => {
      state.billDetailVisible = false;
      state.billDetailId = 0;
      resetMultiple();
      getBillList(false, true);
    };

    /** 小区场景：添加收款账单下拉菜单 */
    const addBillClick = ({key}) => {
      if (key == "add") {
        // 手动添加账单
        addBill();
      } else {
        // 按收费标准生成，先弹modal选择收费标准
        // 因为有多个房间，还需要选房间

        // 如果是一个房间就默认选中房间
        if(state.ownerData.bindList.length == 1){
          state.currentRoom = state.ownerData.bindList[0]
        }else{
          state.currentRoom = {}
        }
        state.selectStandardVisible = true;
      }
    };

    const chargeStandardClose = () => {
      state.selectStandardVisible = false;
    };

    const chargeStandardSuccess = (standard) => {
      state.currentChargeStandard = standard;
      state.currentChargeId = standard.id;
      chargeStandardClose();
      state.standardGenerateOrderVisible = true;
    };

    const standardGenerateOrderClose = () => {
      state.standardGenerateOrderVisible = false;
      state.currentChargeId = 0;
      state.currentChargeStandard = {};
      state.currentRoom = {};
      getBillList(true, true);
    };

    const cancelRoomDetail = () => {
      state.houseDetailVisible = false;
      state.roomDetail = {};
      state.roomList = [];
      state.maxRoomNumber = 0;
    };

    const onBillRowClick = (record) => {
      console.log("record: ", record);
      if (record.infoType === "bill" && !record.children) {
        state.billDetailId = record.id;
        state.billDetailVisible = true;
      }
    };
    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => onBillRowClick(record),
      };
    };

    /** 缴费通知 */
    const onPayNotice = (record) => {
      if (record.children) {
        let ids = [];
        record.children.forEach((v) => {
          if (v.infoType === "bill") {
            // 这一层是 bill 账单
            ids.push(v.id);
          } else {
            if (v.children?.length) {
              // 这一层是 bill 账单
              v.children.forEach((v) => {
                ids.push(v.id);
              });
            }
          }
        });
        state.noticeBillIds = ids;
      } else {
        state.noticeBillIds = [record.id];
      }
      state.noticeVisible = true;
    };

    const onNoticeSuccess = () => {
      state.noticeVisible = false;
      state.noticeBillIds = [];
      resetMultiple();
      getBillList(false, true);
    };

    // 拿到的是所有具体的账单 不包括第几次 也不包括合同信息
    const findBillsByIds = (tree, ids) => {
      let result = [];

      function traverse(node) {
        if (
            ids.includes(node.id) &&
            String(node?.id).indexOf("period_") === -1
        ) {
          let _node = _.cloneDeep(node);
          _node.name = _node.name + `(${_node.period})`;
          result.push(_node);
        }
        if (node?.children?.length) {
          for (const child of node.children) {
            traverse(child);
          }
        }
      }

      for (const node of tree) {
        traverse(node);
      }
      return result;
    };

    // 组合收款
    const goMakeCollections = () => {
      state.billLoading = true;
      state.collectionType = "multiple";
      state.collectionsList = findBillsByIds(
          state.billList,
          state.selectedRowKeys
      );
      state.billLoading = false;
      state.collectVisible = true;
    };

    /**单个收款  也应该走组合收款的逻辑 且 去掉 buildId 不统一的 */
    const onMakeCollections = (record) => {
      // 拿的是第几次的数据 且 不包含不同id 信息的
      let billList = [];
      let _currentBill = _.cloneDeep(record);
      if (record.children) {
        record.children.map((v) => {
          if (v.infoType === "bill") {
            // 这一层是 bill 账单
            billList.push(v);
          } else if (v.children?.length) {
            // 这一层是 bill 账单
            v.children.map((v) => {
              billList.push(v);
            });
          }
        });
        _currentBill.children = billList;
        state.collectionType = "single";
        state.currentBill = _currentBill;
        state.collectVisible = true;
      } else {
        // 点击某一条具体账单
        state.collectionType = "multiple";
        let list = _.cloneDeep(record);
        list.name = list.name + `(${list.period})`;
        state.collectionsList = [list];
        state.collectVisible = true;
      }
    };

    const resetMultiple = () => {
      state.selectedRowKeys = [];
      state.collectionsList = [];
    };
    const collectCancel = () => {
      state.collectVisible = false;
      state.currentBill = {};
      // resetMultiple();
    };

    const onCollectionsSuccess = () => {
      collectCancel();
      getBillList(false, false);
    };

    // 添加账单成功
    const onBillAddSuccess = () => {
      state.addBillVisible = false;
      resetMultiple();
      getBillList(false, true);
    };

    // 获取最大房源号
    const getMaxRoomNumber = (list) => {
      let max = 0;
      for (let room of list) {
        if (max < Number(room.room_number)) {
          max = Number(room.room_number);
        }
      }
      return max;
    };

    // 点击房间详情
    const roomClick = (room, room_list, village_id) => {
      if (canCheck(room.build_id)) {
        let canViewRoomList = room_list.filter((v) => canCheck(v.build_id));
        canViewRoomList = canViewRoomList.map((v) => {
          v.village_id = village_id;
          return v;
        });
        state.roomList = canViewRoomList;
        let _room = _.cloneDeep(room);
        _room.village_id = village_id;
        state.roomDetail = _room;
        state.maxRoomNumber = getMaxRoomNumber(state.roomList);
        state.houseDetailVisible = true;
      }
    };

    const expandRow = (e, record) => {
      if (e) {
        state.expandedRowKeys.push(record.id);
      } else {
        state.expandedRowKeys.splice(
            state.expandedRowKeys.indexOf(record.id),
            1
        );
      }
    };

    const addTurnover = () => {
      state.addTurnoverVisible = true;
    };

    const changeShowReceive = (checked) => {
      resetMultiple();
      utils.setStorage("expand_received", checked);
      changeBillList()
    };

    const changeShowNotYetDue = (checked) => {
      resetMultiple();
      utils.setStorage("expand_not_yet_Due", checked);
      changeBillList();
    }

    // 禁用逻辑
    const isDisabled = (item) => {
      return item.disabled;
    };

    const setVal = (list, arr) => {
      list.forEach((v) => {
        if (!isDisabled(v)) {
          arr.push(v.id);
        }
        if (v.children) {
          setVal(v.children, arr);
        }
      });
    };

    /** antd 2.+ 版本不支持 树形表格的父子交互  3+ 版本支持*/
        // 选择所有的时 去除掉禁用的
    const onSelectAll = async (selected) => {
          if (selected) {
            let tabData = state.billList;
            const arr = [];
            setVal(tabData, arr);
            state.selectedRowKeys = arr;
          } else {
            state.selectedRowKeys = [];
          }
        };

    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    const onSelect = async (record, selected, isFine = false) => {
      const set = new Set(state.selectedRowKeys);
      let canChange = false;
      let tabData = state.billList;
      const id = record.id;
      let _record = record;
      if (canChange) {
        _record = getRecord(id);
      }
      if (selected) {
        set.add(id);
        _record.children && setChildCheck(_record.children);
        setParentCheck(id);
      } else {
        set.delete(id);
        _record.children && setChildUncheck(_record.children);
        setParentUncheck(id);
      }
      state.selectedRowKeys = Array.from(set);
      //每次选中把罚款账单勾选
      if (selected && !isFine) {
        let fineBills = state.penaltyBill || [];
        if (fineBills.length) {
          await fineBills.forEach((v) => {
            if (!state.selectedRowKeys.includes(v.id)) {
              onSelect(v, true, true);
            }
          })
        }
      }
      if (isFine) {
        // 罚款账单 默认展开父级
        if (record?.fatherId) {
          let _expandedRow = _.cloneDeep(state.expandedRowKeys);
          record.fatherId.forEach((v) => {
            _expandedRow.push(v);
          })
          state.expandedRowKeys = [...new Set(_expandedRow)]
        }
      }
      // 设置父级选择
      function setParentCheck(id) {
        let childAllHasCheck = false,
            parent = getParent(id);
        if (parent) {
          let childlist = parent.children;
          // 去除掉禁用的
          let noDisChild = childlist.filter((v) => {
            return !isDisabled(v);
          });
          childAllHasCheck = noDisChild.every((v) => {
            return set.has(v.id);
          });
          if (childAllHasCheck) {
            set.add(parent.id);
            setParentCheck(parent.id);
          }
        }
      }

      // 设置父级取消，如果父级的子集有选择，则不取消
      function setParentUncheck(id) {
        let childAllHasCheck = false,
            parent = getParent(id);
        if (parent) {
          let childlist = parent.children;
          // 去除掉禁用的
          let noDisChild = childlist.filter((v) => {
            return !isDisabled(v);
          });
          childAllHasCheck = noDisChild.every((v) => {
            return set.has(v.id);
          });
          if (!childAllHasCheck) {
            set.delete(parent.id);
            setParentUncheck(parent.id);
          }
        }
      }

      // 获取当前对象的父级
      function getParent(id) {
        for (let i = 0; i < tabData.length; i++) {
          if (tabData[i].id === id) {
            return null;
          }
        }
        return _getParent(tabData);

        function _getParent(list) {
          let childlist,
              isExist = false;
          for (let i = 0; i < list.length; i++) {
            if ((childlist = list[i].children)) {
              childlist.forEach(function (v) {
                if (v.id === id) {
                  isExist = true;
                }
              });
              if (isExist) {
                return list[i];
              }
              if (_getParent(childlist)) {
                return _getParent(childlist);
              }
            }
          }
        }
      }

      // 获取当前最新的record
      function getRecord(id) {
        let recordInfo;
        let getBuild = (list) => {
          for (let i = 0; i < list.length; i++) {
            if (list[i].id === id) {
              recordInfo = list[i];
              break;
            }
            if (list[i].children?.length && !recordInfo) {
              getBuild(list[i].children);
            }
          }
        };
        getBuild(tabData);
        return recordInfo;
      }

      // 设置child全选
      function setChildCheck(list) {
        list.forEach(function (v) {
          if (!isDisabled(v)) {
            set.add(v.id);
          }
          v.children && setChildCheck(v.children);
        });
      }

      // 设置child取消
      function setChildUncheck(list) {
        list.forEach(function (v) {
          if (!isDisabled(v)) {
            set.delete(v.id);
          }
          v.children && setChildUncheck(v.children);
        });
      }
    };

    const getCheckboxProps = (record) => {
      return {
        disabled: isDisabled(record),
      };
    };

    const currentOwner = computed(() => {
      return {
        id: props.ownerId,
        name: state.ownerData.name,
      };
    });

    const changeBillDis = (data) => {
      data.map((v) => {
        if (v.infoType === "bill") {
          let isDis =
            v.settleStatus?.length === 1 ? v.settleStatus[0] == 2 || v.settleStatus[0] == 4 : false;
          v.disabled = isDis;
        } else {
          if (v?.children?.length) {
            changeBillDis(v.children);
          }
        }
      });
    };

    const changeFatherDis = (item) => {
      return item.children.every((v) => v.disabled);
    };
    const changeDisabled = () => {
      // 禁用逻辑
      return new Promise((resolve) => {
        // 处理账单的disabled
        changeBillDis(state.billList);
        // 只兼容了三层
        // 处理合同级别的disabled (第二层)
        state.billList.map((v) => {
          if (v.children) {
            v.children.map((item) => {
              if (item.infoType !== "bill") {
                item.disabled = changeFatherDis(item);
              }
              return item;
            });
          }
          return v;
        });
        // 处理次数级别的disabled (第一层)
        state.billList.map((v) => {
          v.disabled = changeFatherDis(v);
          return v;
        });
        state.billList = [...state.billList];
        resolve(state.billList);
      });
    };

    const handleAddBillClose = () => {
      state.addTurnoverVisible = false;
    };

    const saveAddTurnover = () => {
      handleAddBillClose();
      getCashierInfo();
      getBillList(false, false);
    };

    const addPaymentNotice = () => {
      request
        .post("/org", "/notice/beforeVerify", {
          billIds: state.selectBillIds,
          needMsg: true,
        })
        .then((res) => {
          if (res.data.pass) {
            state.addNoticeIds = res.data.matchIds;
            state.addNoticeVisible = true;
          } else {
            Modal.confirm({
              title: "提示",
              content: () => res.msg,
              icon: () => createVNode(ExclamationCircleOutlined),
              centered: true,
              okText: () => "继续",
              onOk() {
                state.addNoticeIds = res.data.matchIds;
                state.addNoticeVisible = true;
              },
            });
          }
        })
        .catch((err) => {
          console.log(err);
          if (err.code == 60023) {
            Modal.info({
              title: "提示",
              content: () => err.msg,
              centered: true,
              okText: () => "确定",
            });
          }
        });
    };

    const addNoticeClose = () => {
      state.addNoticeVisible = false;
      state.addNoticeIds = [];
    };

    const addNoticeSuccess = () => {
      addNoticeClose();
      resetMultiple();
      getBillList(false, true);
    };

    const handleRefundClose = (isSuccess) => {
      state.refundVisible = false;
      if (isSuccess) {
        resetMultiple();
        getBillList(false, true);
      }
    };

    watchEffect(() => {
      let bills = findBillsByIds(
        state.billList,
        state.selectedRowKeys
      );
      state.selectBillIds = bills.map((v) => v.id);
    });

    const init = (isPenalty) => {
      getCashierInfo();
      getBillList(true, isPenalty);
    };

    init(true);

    onActivated(() => {
      init(false);
    });

    return {
      ...toRefs(state),
      houseColumns,
      BILL_COLUMNS,
      currentOwner,
      rowSelection,
      turnoverPagination,
      toContractDetail,
      canCheck,
      goRoomDetail,
      cancelRoomDetail,
      customRow,
      onSelectAll,
      onSelect,
      getCheckboxProps,
      goMakeCollections,
      onMakeCollections,
      collectCancel,
      onCollectionsSuccess,
      onBillAddSuccess,
      addBill,
      roomClick,
      expandRow,
      onBillDetailClose,
      onNoticeSuccess,
      onPayNotice,
      billTurnoverClose,
      toBillTurnover,
      getTurnoverData,
      turnoverTableChange,
      cancelOwnerDetail,
      addTurnover,
      saveAddTurnover,
      getBuildName,
      changeShowReceive,
      villageType,
      addBillClick,
      chargeStandardClose,
      chargeStandardSuccess,
      standardGenerateOrderClose,
      changeShowNotYetDue,
      activeTipsIndex,
      handleAddBillClose,
      addNoticeClose,
      addNoticeSuccess,
      addPaymentNotice,
      handleRefundClose,
    };
  },
});

const houseColumns = [
  {
    title: "项目",
    dataIndex: "village_name",
    align: "center",
  },
  {
    title: "楼宇",
    dataIndex: "build_name",
    align: "center",
  },
  {
    title: "楼层",
    dataIndex: "layer_name",
    align: "center",
  },
  {
    title: "房间号",
    dataIndex: "room_number",
    key: "room_number",
    align: "center",
  },
  {
    title: "租赁面积",
    dataIndex: "lease_square",
    align: "center",
    customRender: ({text, record, index}) => {
      return (record?.rent_data?.lease_square || 0) + "㎡";
    },
  },
  {
    title: "物业面积",
    dataIndex: "property_square",
    align: "center",
    customRender: ({text, record, index}) => {
      return (record?.rent_data?.property_square || 0) + "㎡";
    },
  },
  {
    title: "房源标签",
    dataIndex: "tag_name_arr",
    key: "tag_name",
    align: "center",
  },
];

const BILL_COLUMNS = [
  {
    title: "缴费次数",
    dataIndex: "name",
    key: "billName",
    customCell: (record, rowIndex) => {
      return {
        colSpan:
            record.infoType !== "contract"
                ? record.infoType !== "other"
                    ? 1
                    : 11
                : 4,
      };
    },
  },
  {
    title: "应收时间",
    dataIndex: "month",
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {
          display: ["contract", "other"].includes(record.infoType)
              ? "none"
              : "",
        },
        colSpan: ["contract", "other"].includes(record.infoType) ? 0 : 1,
      };
    },
  },
  {
    title: "有效期",
    dataIndex: "period",
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {
          display: ["contract", "other"].includes(record.infoType)
              ? "none"
              : "",
        },
        colSpan: ["contract", "other"].includes(record.infoType) ? 0 : 1,
      };
    },
  },
  {
    title: "特殊账单类型",
    dataIndex: "is_forfeit",
    key: "is_forfeit",
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {
          display: ["contract", "other"].includes(record.infoType)
              ? "none"
              : "",
        },
        colSpan: ["contract", "other"].includes(record.infoType) ? 0 : 1,
      };
    },
    customRender: ({text, record, index}) => {
      return text ? '罚金' : '正常';
    },
    width: 105,
  },
  {
    title: "应收租金",
    dataIndex: "receiveRentTotal",
    key: "receiveRentTotal",
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {display: ["other"].includes(record.infoType) ? "none" : ""},
        colSpan:
            record.infoType !== "contract"
                ? record.infoType !== "other"
                    ? 1
                    : 0
                : 2,
      };
    },
  },
  {
    title: "其他费用",
    dataIndex: "receiveOtherTotal",
    key: "receiveOtherTotal",
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {
          display: ["contract", "other"].includes(record.infoType)
              ? "none"
              : "",
        },
        colSpan: ["contract", "other"].includes(record.infoType) ? 0 : 1,
      };
    },
  },
  {
    title: "滞纳金",
    dataIndex: "receiveLatefeeTotal",
    key: "receiveLatefeeTotal",
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {display: ["other"].includes(record.infoType) ? "none" : ""},
        colSpan:
            record.infoType !== "contract"
                ? record.infoType !== "other"
                    ? 1
                    : 0
                : 2,
      };
    },
  },
  {
    title: "应收金额",
    dataIndex: "receiveTotal",
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {
          display: ["contract", "other"].includes(record.infoType)
              ? "none"
              : "",
        },
        colSpan: ["contract", "other"].includes(record.infoType) ? 0 : 1,
      };
    },
  },
  {
    title: "收款状态",
    dataIndex: "settleStatus",
    key: "settle",
    width: 200,
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {display: ["other"].includes(record.infoType) ? "none" : ""},
        colSpan:
            record.infoType !== "contract"
                ? record.infoType !== "other"
                    ? 1
                    : 0
                : 3,
      };
    },
  },
  {
    title: "实收金额",
    dataIndex: "actualTotal",
    align: "center",
    width: 120,
    customCell: (record, rowIndex) => {
      return {
        style: {
          display: ["contract", "other"].includes(record.infoType)
              ? "none"
              : "",
        },
        colSpan: ["contract", "other"].includes(record.infoType) ? 0 : 1,
      };
    },
  },
  {
    title: "催收通知",
    dataIndex: "noticeStatus",
    key: "notice",
    width: 180,
    align: "center",
    customCell: (record, rowIndex) => {
      return {
        style: {
          display: ["contract", "other"].includes(record.infoType)
              ? "none"
              : "",
        },
        colSpan: ["contract", "other"].includes(record.infoType) ? 0 : 1,
      };
    },
  },
];
</script>

<style lang="less" scoped>
.owner-cashier {
  background-color: #fff;
}

.owner-descriptions {
  margin-top: 10px;
}

:deep(.ant-descriptions-item-label) {
  text-align: center;
}

:deep(.ant-descriptions-item-content) {
  text-align: center;
}

.owner-bind {
  font-size: 16px;
  font-weight: 600;
}

.font-16 {
  font-size: 16px;
}

.bind-table {
  margin-top: 10px;
}

.bill-table {
  &:deep(.ant-table) {
    color: rgba(0, 0, 0, 85);

    .ant-table-tbody tr:nth-child(2n) td {
      background-color: initial !important;
    }
  }

  &:deep(.ant-table-row-level-1) {
    background-color: #e0e0e0 !important;
  }

  &:deep(.ant-table-row-level-2) {
    font-size: 13px;
    background-color: #fafafa !important;
  }
}

.bind-room-box {
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.disabled-link {
  &:hover {
    cursor: not-allowed;
  }
}

.bill-table-title {
  display: flex;
  align-items: center;
}

.switch-wrap {
  background-color: #f2f2f2;
  border-radius: 20px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}
</style>
